<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'product.jsp' starting page</title>
    
    <script type="text/javascript">
       function showDetail(e){
	      var id=$(e).attr("id");
	      var info=id.split("_");
	      var customerCode=info[0];
	      var areagroupCode=info[1];
	      var sku=info[2];
	      
	      var name=$(e).attr("name");
	      var info2=name.split("_");
	      var customerName=info2[0];
	      var areagroupName=info2[1];
	      
	      $("#customerName").html(customerName);
	      $("#areagroupName").html(areagroupName);
	      $("#sku").html(sku);
	      
	      $.ajax({
			    type : 'post',
				url : '${ctx}/stock/stockDetail',
				data : {
					customerCode:customerCode,
					areagroupCode:areagroupCode,
					sku:sku
				},
				dataType : 'json',
				success : function(data) {
					var stockList = data.stockList;
					
					//库位信息
					$("#detail_content").html("");
					var str='';
					$.each(stockList, function(i) {
					   var stock=stockList[i];
					   str+="<tr>";
					   str+="<td>"+stock.stockCode+"</td>";
					   str+="<td>"+stock.salesNum+"</td>";
					   str+="<td>"+stock.unusedNum+"</td>";
					   str+="<td>"+stock.orderNum+"</td>";
					   str+="<td>"+stock.lockedNum+"</td>";
					   str+="<td>"+stock.transportNum+"</td>";
					   str+="<td>"+stock.airNum+"</td>";
					   str+="<td>"+stock.totalNum+"</td>";
					   str+="</tr>";
					});
					$("#detail_content").html(str);
					
				},
				error : function() {
					alert("网络繁忙，请稍后重试...");
				}
			}); 
	  }
	  
	
	function query() {
		$("#inputForm").attr("action", "${ctx }/productManager/show");
		$("#inputForm").submit();
	}
    
    </script>
  </head>
  
  <body>
  <div class="span15" style="margin-left: 20px;">
       <form method="post" id="inputForm" class="form-search">
      
						<label>
							<b>客户:</b>
						</label>
						<select name="search_EQ_customer.customerCode" class="input-medium" style="width: 220px;" onchange="ajaxAreaGroup(this,'areaLists')" id="customerId">
							<c:forEach items="${customers}" var="obj">
								<option value="${obj.customerCode}"
									<c:if test="${customerCode eq obj.customerCode}">selected</c:if>>
									${obj.customerName}
								</option>
							</c:forEach>
						</select>
						<label>
							<b>网点:</b>
						</label>
						<select name="search_EQ_areagroup.groupCode" class="input-medium" style="width: 220px;" id="areaLists">
							<c:forEach items="${object.restAreaGroupDtos}" var="obj">
								<option value="${obj.areagroupCode}"
									<c:if test="${areaGroupCode eq obj.areagroupCode}">selected</c:if>>
									${obj.areagroupName}
								</option>
							</c:forEach>
						</select>
										
						<button type="button" onclick="query();" class="btn">
							查询
						</button>
       </form>
   </div>
  
    <!-- sku查询 -->
	<table id="skuTable" class="table table-striped table-bordered table-condensed">
		<thead><tr>
		    <th style="width: 100px;">SKU编码</th>
		    <th style="width: 100px;">货号</th>
		    <th style="width: 100px;">名称</th>
		     <th style="width: 100px;">属性</th>
		    <th style="width: 100px;">可销售库存</th>
		    <th style="width: 100px;">不可销售库存</th>
		    <th style="width: 100px;">订单占用库存</th>
		    <th style="width: 100px;">锁定库存</th>
		    <th style="width: 100px;">调拨占用库存</th>
		    <th style="width: 100px;">调拨中库存</th>
		    <th style="width: 100px;">库存总量</th>
		    <th>操作</th>
		</tr></thead>
		
		<c:if test="${viewStocks ne null}">
			<c:forEach items="${viewStocks.content}" var="stock">
				<tr>
				   
				   <td>${stock.sku}</td>
				   
				   <td>
				     <c:if test="${stock.ediGoodsSku ne null }">
				      ${ stock.ediGoodsSku.bar}
				     </c:if>
				   </td>
				   
				   <td>
				   <c:if test="${stock.ediGoodsSku ne null }">
				      ${ stock.ediGoodsSku.skuName}
				     </c:if>
                   </td>
                   
                   <td>
				   <c:if test="${stock.ediGoodsSku ne null }">
				      ${ stock.ediGoodsSku.col}
				     </c:if>
                   </td>
				   <td>${stock.salesNum}</td>
				   <td>${stock.unusedNum}</td>
				   <td>${stock.orderNum}</td>
				   <td>${stock.lockedNum}</td>
				   <td>${stock.transportNum}</td>
				   <td>${stock.airNum}</td>
				   <td>${stock.totalNum}</td>
				   <td>
				     <a href="#detail" data-toggle="modal" class="btn btn-info "
				      name="${stock.customer.customerName}_${stock.areagroup.groupName}_${stock.sku}"
				      id="${stock.customer.customerCode}_${stock.areagroup.groupCode}_${stock.sku}" onclick="showDetail(this);">查看明细</a>
				   </td>
				</tr>
			</c:forEach>
			</c:if>
		</table>
		
		
		<c:if test="${viewStocks ne null}" >
		  <div id="viewStocks"><tags:pagination  page="${viewStocks}" paginationSize="5" /></div>
		</c:if>
		
		<!-- 库存明细 -------------------------------------------------------------------------------------------------->
	<div style="display: none; width:880px;" class="modal hide fade"  id="detail" >
	<form id="inputForm"  method="post" class="form-horizontal">
	
		<!-- 头 -->
		<div class="modal-header" style="height: 0px;" ></div>
		<!-- 体 -->
		<div class="modal-body" style="height: 400px;">
		
		   <table class="table table-striped table-bordered table-condensed" >
        	  <thead>
			    <th style="color: white;" bgcolor="#8EB4CB">库存网点</th>
			    <th style="color: white;" bgcolor="#8EB4CB">商家</th>
			    <th style="color: white;" bgcolor="#8EB4CB">sku编码</th>
			  </thead>
	          <tr>
	             <td id="areagroupName"></td>
	             <td id="customerName"></td>
	             <td id="sku"></td>
	          </tr>
	        </table>  
		
			<table id="contentTable" class="table table-striped table-bordered table-condensed">
			<thead>
			<th style="vertical-align: middle; color: white;" bgcolor="#8EB4CB" colspan="8">库存信息</th>
			<tr>
			    <th style="width: 100px;">库位编码</th>
			    <th style="width: 100px;">可销售库存</th>
			    <th style="width: 100px;">不可销售库存</th>
			    <th style="width: 100px;">订单占用库存</th>
			    <th style="width: 100px;">锁定库存</th>
			    <th style="width: 100px;">调拨占用库存</th>
			    <th style="width: 100px;">调拨中库存</th>
			    <th>总量</th>
			</tr></thead>
			<tbody id="detail_content"></tbody>
			</table>		       
		      
		</div>
		<!-- 尾 -->
		<div class="modal-footer">
			<a class="btn btn-info" data-dismiss="modal" aria-hidden="true">返回</a>
		</div>
		
        </form> 
     </div>
     <!------------------------------------------------------------------------------------------------------------->
  </body>
</html>
